<template>
  <div>
    <!-- 顶栏 -->
    <div class="top">
      <el-input
        placeholder="请输入名称"
        prefix-icon="el-icon-search"
        v-model="input"
        @input="blur()"
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="change()"
        >搜索</el-button
      >
    </div>

    <el-button id="add" type="primary" @click="dialogFormVisible = true"
      >入库服务</el-button
    >

    <!-- 主表单框 -->
    <div class="down">
      <el-table :data="personData" height="570" border style="width: 100%">
        <el-table-column
          prop="name"
          label="名称"
          width="190"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="种类"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格（千克，个）"
          width="190"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="number" label="数量" width="190" align="center">
        </el-table-column>
        <el-table-column
          prop="hj"
          label="储存环境要求"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加 -->
    <el-dialog title="物品信息" :visible.sync="dialogFormVisible">
      <el-form :model="AddStore" ref="ManageTable">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="AddStore.name"></el-input>
        </el-form-item>
        <el-form-item label="类别" label-width="100px">
          <el-input v-model="AddStore.class"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input v-model="AddStore.price"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" label-width="100px">
          <el-input v-model="AddStore.number"></el-input>
        </el-form-item>
        <el-form-item label="环境要求" label-width="100px">
          <el-input v-model="AddStore.hj"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="StoreAdd(AddStore)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog title="入库信息" :visible.sync="dialogFormVisible2">
      <el-form :model="personTable" ref="userForm2">
        <el-form-item label="物品名称" label-width="100px">
          <el-input v-model="personTable.name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="物品种类" label-width="100px">
          <el-input v-model="personTable.class" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="物品价格" label-width="100px">
          <el-input v-model="personTable.price"></el-input>
        </el-form-item>
        <el-form-item label="物品数量" label-width="100px">
          <el-input v-model="personTable.number"></el-input>
        </el-form-item>
        <el-form-item label="存储环境" label-width="100px">
          <el-input v-model="personTable.hj"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="checked(personTable)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      // 数据
      personData: [],
      AddStore: {
        name: '',
        class: '',
        price: '',
        number: '',
        hj: ''
      },
      input: '',
      personTable: {}
    }
  },
  created () {
    this.myStore()
  },
  methods: {
    // 请求库存
    myStore () {
      const that = this
      const item = JSON.parse(sessionStorage.getItem('user'))
      this.$http({
        method: 'POST',
        url: '/lk/lk/storePerson',
        data: {
          username: item.username
        }
      }).then(function (response) {
        console.log(response);
        that.personData = response.data.data
        for (let i = 0; i < that.personData.length; i++) {
          if (Number(that.personData[i].number) <= 0) {
            that.personData.splice(i, 1)
          }
        }
      })
    },
    // input输入框为空时：
    blur () {
      if (this.input == '') {
        this.change()
      }
    },
    // 搜索函数
    change () {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: "POST",
        url: '/lk/lk/storeSearch',
        data: {
          name: this.input,
          person: item.username
        }
      }).then(function (response) {
        that.personData = response.data.data
      })
    },
    // 添加库存
    StoreAdd (form) {
      const item = JSON.parse(sessionStorage.getItem('user'))
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/storeAdd',
        data: {
          name: form.name,
          class: form.class,
          price: form.price,
          number: form.number,
          hj: form.hj,
          person: item.username,
          weizhi:''
        }
      }).then(function (response) {
        that.personData = response.data.data
      })
      that.dialogFormVisible = false
      location.reload()
    },
    // 编辑
    handleEdit (index, row) {
      console.log(row);
      this.dialogFormVisible2 = true
      // 在表单中显示要修改的数据
      this.personTable = row
    },
    // 修改表单
    checked (form) {
      //   const item = JSON.parse(sessionStorage.getItem('user'))
      console.log(form);
      this.$http({
        method: 'POST',
        url: '/lk/lk/storeRevise',
        data: {
          id: form._id,
          person: form.person,
          num: form.number,
          name: form.name,
          class: form.class,
          price: form.price,
          hj: form.hj
        }
      }).then(function (response) { })
      this.dialogFormVisible2 = false
    },
    // 删除
    handleDelete (index, row) {
        console.log(row);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this
        this.$http({
          method: 'POST',
          url: '/lk/lk/storeDelete',
          data: {
            id: row._id,
          }
        }).then(function (response) {
          that.personData.splice(index, 1)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
  </script>
  
  <style lang="less" scoped>
.top {
  top: 80px;
  position: absolute;
  .el-input {
    width: 300px;
    // margin-bottom: 10px;
  }
  .el-button {
    height: 39px;
  }
}
.down {
  position: relative;
  top: 40px;
}
#xuanze {
  display: flex;
}
#add {
  float: right;
}
</style>